//TODO:自定义表单
<template>
  <MainContainer class="p-5">
    <MyQuery
      v-model:params="params"
      :options="queryOptions"
      @query="handleQuery"
      @reset="handleReset"
    ></MyQuery>
    <div class="flex">
      <el-button type="primary" @click="openDialog()">+添加表单</el-button>
    </div>
    <MyTable
      v-loading="loading"
      class="my-2"
      :data="list"
      :columns="columns"
      :is-show-selection="false"
    ></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <FormCreateTest
      v-model:visible="dialogVisible"
      :category-list="categoryList"
      @get-list="handleQuery"
    ></FormCreateTest>
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from "@/composables/useCRUD.js";
import MyQuery from "@/components/MyQuery.vue";
import MainContainer from "@/components/MainContainer.vue";
import MyTable from "@/components/MyTable.vue";
import FormCreateTest from "@/views/quadruped/components/FormDesign.vue";
import {
  getCustomForm,
  deleteCustomForm,
  getCustomFormCategory,
  publishCustomForm,
  stopCustomForm,
} from "@/api/footform/custom-form";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

onMounted(() => {
  getCategoryList();
});

//获取表单分类列表
const categoryList = ref([]);
async function getCategoryList() {
  const res = await getCustomFormCategory();
  categoryList.value = res.data.list;
}

const queryOptions = [
  {
    prop: "name",
    placeholder: "表单名称",
  },
  {
    prop: "cid",
    placeholder: "表单分类",
    customRender() {
      return (
        <el-select placeholder="请选择分类" class="w-full">
          {categoryList.value.map((item) => {
            return <el-option label={item.name} value={item.id}></el-option>;
          })}
        </el-select>
      );
    },
  },
  {
    prop: "status",
    placeholder: "表单状态",
    customRender() {
      return (
        <el-select placeholder="请选择状态" class="w-full">
          <el-option value={0} label="未发布" />
          <el-option value={1} label="收集中" />
          <el-option value={2} label="已结束" />
        </el-select>
      );
    },
  },
  {
    prop: "selectTime",
    label: "任务执行时间",
    customRender() {
      return (
        <el-date-picker
          value-format="YYYY-MM-DD 00:00:00"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      );
    },
  },
];

const columns = [
  {
    prop: "name",
    label: "表单名称",
  },

  {
    prop: "description",
    label: "表单描述",
  },
  {
    prop: "",
    label: "表单链接",
    customRender(row) {
      if (row.status === 1) {
        return (
          <div>
            <el-button
              link
              onClick={() => previewForm(row.key, "foot-form-create")}
            >
              点击查看
            </el-button>
          </div>
        );
      }
    },
  },
  {
    prop: "status",
    label: "表单状态",
    formatter(row) {
      const { status } = row;
      switch (status) {
        case 0:
          return "未发布";
        case 1:
          return "收集中";
        case 2:
          return "已结束";
        default:
          break;
      }
    },
  },
  {
    prop: "cid",
    label: "表单分类",
    formatter(row) {
      const { cid } = row;
      const name = ref("");
      categoryList.value.map((item) => {
        if (item.id === cid) {
          name.value = item.name;
        }
      });
      return name.value;
    },
  },
  {
    label: "操作",
    prop: "action",
    minWidth: 100,
    customRender(row) {
      return (
        <div>
          <el-button link onClick={() => publishForm(row.id)}>
            发布
          </el-button>
          <el-button
            link
            onClick={() => previewForm(row.key, "foot-form-create")}
          >
            预览
          </el-button>
          <el-button link onClick={() => stopForm(row.id)}>
            停止
          </el-button>
          <el-button
            link
            onClick={() => getFormData(row.key, "foot-form-create-data")}
          >
            数据
          </el-button>
          <el-button link onClick={() => handleDelete(row.id)}>
            删除
          </el-button>
        </div>
      );
    },
  },
];

const dialogVisible = ref(false);

function openDialog() {
  dialogVisible.value = true;
}

async function publishForm(id) {
  await publishCustomForm(id);
  handleQuery();
}

async function stopForm(id) {
  await stopCustomForm(id);
  handleQuery();
}

let router = useRouter();

function previewForm(key, name) {
  //路由跳转
  if (key) {
    router.push({
      name,
      params: { key },
    });
  } else {
    router.push({
      name,
    });
  }
}

function getFormData(key, name) {
  if (key) {
    router.push({
      name,
      query: { key },
    });
  } else {
    router.push({
      name,
    });
  }
}

const crudOptions = {
  queryApi: getCustomForm,
  deleteApi: deleteCustomForm,
};
const { params, handleQuery, list, loading, handleReset, handleDelete, total } =
  useCRUD(crudOptions);

handleQuery();
</script>
